<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
  <link rel="stylesheet"
        href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <script
          src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script
          src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
  <link rel="stylesheet"
        href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #fff;
      margin: 0;
      padding: 0;
    }
    .register-container {
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
    }
    .register-container h2{
      font-weight: 600;
      font-size: 32px;
      letter-spacing: 1px;
      color: #000000;
      line-height: 50px;
      text-align: center;
      margin-bottom: 60px;
    }
    .show-password {
      float: right;
      cursor: pointer;
      color: #008CBA;
    }

  </style>
</head>
<body>
<div class="register-container">
  <h2>填写注册信息</h2>
  <form id="registerForm">
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" class="form-control" id="name"
             name="name" placeholder="请输入姓名" required>
    </div>
    <div class="form-group">
      <label for="mail">邮箱</label>
      <input type="email" class="form-control" id="mail"
             name="mail" placeholder="请输入邮箱" required>
    </div>
    <div class="form-group">
      <label for="phoneNumber">手机号</label>
      <input type="text" class="form-control" id="phoneNumber"
             name="phoneNumber" placeholder="请输入手机号" required>
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" class="form-control" id="password"
             name="password" placeholder="请输入密码" required>
    </div>
    <button type="submit"
            class="btn btn-primary btn-block">注册</button>
  </form>
</div>

<script>
  // 获取链接参数
  var params = new URLSearchParams(window.location.search);
  var jumpList = params.get('jumpList');
  var admin = params.get('admin');

  // 判断是否隐藏密码输入框
  if(admin === 'false') {
    // 隐藏密码输入框
    $('#password').closest('div.form-group').css('display', 'none');
  }

  // 使用jQuery Validate插件来验证表单
  $("#registerForm").validate({
    rules: {
      name: "required",
      mail: {
        required: true,
        email: true
      },
      phoneNumber: "required",
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: "请输入您的姓名",
      mail: "请输入有效的邮箱地址",
      phoneNumber: "请输入您的手机号",
      password: {
        required: "请输入密码",
        minlength: "密码长度至少为6个字符"
      }
    },
    submitHandler: function(form) {
      var formData = {
        name: $('#name').val(),
        mail: $('#mail').val(),
        phoneNumber: $('#phoneNumber').val(),
        password: $('#password').val(),
        identity: (admin == null || admin === 'true') ? "ADMIN" : "NORMAL"
      };

      // 表单验证通过后，发送AJAX请求
      $.ajax({
        url: '/register',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(result) {
          if (result.code != 200) {
            alert("注册失败！" + result.messages);
          } else {
            if (jumpList === 'true') {
              // 给父页面发消息，表示要跳转到人员列表页
              window.parent.postMessage(
                      {
                        from: 'user-list.html',
                        id: '#userList'
                      }, '*'
              );
            } else {
              alert("注册成功，去登录！");
              location.assign("blogin.html");
            }
          }

        }
      });
      return false; // 阻止表单的默认提交行为
    }
  });
</script>
</body>
</html>